<template>
  <div>
    <!--文章模块-头部-->
    <el-row>
      <el-col :span="2">
        <span style="font-weight: bolder;color:#666"><i class="el-icon-edit-outline"></i>最新教程</span>
      </el-col>
      <el-col :span="1" :offset="20">
        <span class="text-right"><a href="#">更多</a></span>
      </el-col>
    </el-row>
    <!--文章模块-内容-->
    <el-row>
      <el-col class="top-course-container" :span="6" v-for="(c,index) in topCourseList">
        <div class="top-course">
          <dl class="item">
            <dt><a href="#"><img :src="c.logo"></a></dt>
            <dd>
              <div style="text-align: start">{{ c.cname }}</div>
              <p class="item-footer"><span style="color:#0bbe0b">免费</span><span style="color:orangered">[置顶]</span>
                <span class="pull-right">关注度<span class="num">100</span></span></p>
            </dd>
          </dl>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>

import http from "@/utils/http";

export default {
  name: "MyTopicCourse",
  data() {
    return {
      topCourseList: []
    }
  },
  mounted() {
    this.initTopCourseList();
  },
  methods: {

    initTopCourseList() {
      console.log('初始化课程列表....');
      http.get('/getTopCourseList').then(resp => {
        console.log(resp);
        this.topCourseList = resp.data.data;
      }).catch(err => {
        console.log(err);
      })
    }
  }

}
</script>

<style scoped>

.text-right a {
  color: #666;
  text-decoration: none;
  font-size: small;
}

.top-course {
  margin: 10px;
  padding: 0px;
  border: 1px solid #DDDDDD;
}

.item img {
  width: 100%;
}

.item {
  background: #fff;
  margin: 0px;
}

.item dd {
  position: relative;
  left: -20px;
  height: 50px;
  background: #FFF;
  color: #336699;
  font-size: small;
  font-weight: bolder;
}

.item:hover {
  transform: scale(1.00, 1.00);
  box-shadow: 0 5px 12px #DDDDDD;
  cursor: pointer;
}

.item dt {
  overflow: hidden;
}

.item img {
  transition: all 1.1s;
}

.item img:hover {
  transform: scale(1.05);
}

.item-footer {
  font-size: x-small;
  font-weight: normal;
  text-align: end;
  color: #999;
}

</style>
